<template>
    <view class="wrap">
        <!-- @scrolltolower:滚动到底部触发  lower-threshold：距离底部多少距离触发@scrolltolower -->
        <scroll-view class="scroll-view_H" scroll-x="true" scroll-y="true" @scrolltolower='scrollBottom'
            :lower-threshold='2'>
            <view class="top" id="top" :style="{width:tableWidths+'px'}">
                <view v-for="(h,n) in header" :key='n' :class="{'header_dyg':true,'flexs':h.flex}"
                    :style="{width:h.hWidth+'px'}">
                    {{h.name}}
                </view>
            </view>
            <view class="bottom" :style="{maxHeight: tableHeight+'px',width:tableWidths+'px'}">
                <view class="tablebox" v-for="(t,s) in tableData" :key='s' @click="jumpDetailed(t)">
                    <view v-for="(h,n) in header" :key="n"
                        :class="{'table_dyg':true,'tdColClass':h.bgcolor,'tdRowClass':t.bgcolor,'flexs':h.flex}"
                        :style="{width:h.hWidth+'px'}">
                        <!-- 不等于操作列就显示文字 -->
                        <text v-if="h.key!=='edit'" :style="{color:getColor(t,h)}">{{t[h.key]}}</text>
                        <!-- 操作列显示按钮，后期用插槽 -->
                        <view class="uni-group" v-else style="background-color: #fff;">
                            <button class="uni-button" size="mini" type="primary" style="margin-right: 5px;"
                                @click="editTable(t)">编辑</button>
                            <button class="uni-button" size="mini" type="warn" @click="deleteTable(t)">删除</button>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
// 表头配置：flex(固定列)，bgcolor(列底纹)
// 表体配置：bgcolor(行底纹)
export default {
    props: {
        data2: {
            type: Array,
            required: true,
            default: function() {
                return [];
            }
        },
        head: {
            type: Array,
            required: true,
            default: function() {
                return [];
            }
        },
        tableHeight: {
            required: true,
            type: [Number, String],
            default: function() {
                return 0;
            }
        }
    },
    data() {
        return {
            //表体
            tableData: [],
            //表头
            header: [],
            // 表格总长度
            tableWidths:0
        }
    },
    watch:{
        // 监听列表
        'data2'(a,b){
            this.tableData = a
        },
        // 监听表头
        'head'(a,b){
            this.header = a
            //计算列宽
            this.tableWidth()
        },
    },
    created() {
        this.tableData = this.data2 //列表
        this.header = this.head //表头
        this.tableWidth()
    },
    methods: {
        // 返回行数据
        jumpDetailed(row){
            this.$emit('rowData',row)
        },
        // 滚动到底部，调用父组件方法
        scrollBottom(e) {
            // 滚动到底部才触发，滚动到右边不触发
            if (e.detail.direction == "bottom") {
                this.$emit('scrollBottom')
            }
        },
        // 颜色对比
        getColor(row, col) {
            let color = 'black'
            // 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染
            this.$emit('getTextColor', row, col, (val) => {
                color = val
            })
            return color
        },
        // 修改按钮
        editTable(val) {
            this.$emit('getEdit', val)
        },
        // 删除按钮
        deleteTable(val) {
            this.$emit('getDelete', val)
        },
        // 计算单元格宽度
        tableWidth() {
            let w=0 //计算表格长度
            this.header.forEach((head, index) => {
                let hw = head.name.length //表头单元格宽度
                let dw = 0 //列表单元格宽度
                this.tableData.forEach(data => {
                    // 如果是操作列，就直接给十个字符长度，也就是列宽自动150，不是操作列的统一看字符串长度决定宽度
                    let a = (head.key == 'edit' ? '1234567891' : (data[head.key]?data[head.key].toString():'1'))
                    let tw = (head.key == 'edit' ? 10 : a.length)
                    // 这里每次循环找出更大的数赋值，确保dw中是表体单元格这一列中最大宽度，根据最大宽度来判断单元格显示
                    if (dw < tw) {
                        dw = tw
                    }
                })
                // 表体单元格内容宽度小于表头内容时，以表头的宽度为主。根据表头的字符长度来区分宽度
                if (dw <= hw) {
                    if (hw <= 3) {
                        head['hWidth'] = 50
                    } else if (hw <= 5) {
                        head['hWidth'] = 80
                    } else {
                        head['hWidth'] = 130
                    }
                } else {
                    // 表体内容宽度大于表头内容宽度时，以表体宽度为主。根据表头的字符长度来区分宽度
                    if (dw <= 3) {
                        head['hWidth'] = 50
                    } else if (dw <= 5) {
                        head['hWidth'] = 80
                    } else {
                        head['hWidth'] = 130
                    }
                }
                w+=head['hWidth'] //叠加表格总长度
            })
            this.tableWidths=w   //给表格赋值总长度
        }
    }
}
</script>

<style lang="scss">
.wrap {
    width: 100%;
}

/* 表头 */
.top {
    display: flex;
    position: sticky; /* 表头向上滚动时固定住 */
    top: 0;
    /*width: 750px; //左右滚动时不会把固定的表头滚动走 */
    z-index: 100; /* 滑动时表头不被覆盖 */

    .header_dyg {
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 0 5px;
        background-color: #f5f5f6;
        font-size: 14px;
        font-weight: bold;
        color: #2b2b2b;
        flex-shrink: 0;
    }

    /* 列定位固定单元格 */
    .flexs {
        position: sticky;
        left: 0;
        background-color: #f5f5f6;
        z-index: 10;
    }
}

/* 表格列表 */
.bottom {
    /*width: 750px; */

    .tablebox {
        display: flex;
        font-size: 14px;

        .table_dyg {
            height: 30px;
            text-align: center;
            line-height: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding: 0 5px;
            flex-shrink: 0;
        }

        /* 列定位固定单元格 */
        .flexs {
            position: sticky;
            left: 0;
            background-color: #fff;
            z-index: 10;
        }
    }
}

/* 列的颜色 */
.tdColClass {
    background-color: #d9edf7;
}

/* 行的颜色 */
.tdRowClass {
    background-color: #afdfe4;
}
</style>